import React, { Component } from 'react'
import { connect } from 'react-redux'

export class Home extends Component {
    render() {
        const { count, add, del, list } = this.props
        return (
            <div>
                <button onClick={ del }>--</button>
                { count }
                <button onClick={ add }>++</button>
                <div>
                    { list }
                </div>
            </div>
        )
    }
    componentDidMount() {
        this.props.init()
    }
}

const mapStateToProps = (state) => {
    const { count, list } = state
    return {
        count,
        list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        add() {
            dispatch({ type: "ADD_COUNT" })
        },
        del() {
            dispatch({ type: "DEL_COUNT" })
        },
        init() {
            dispatch({ type: "INIT_LIST" })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)
